import { Button, Checkbox, Form, Input } from 'antd4';
import React from 'react17';
// import ReactDOM from "react17-dom";
// import 'antd4/dist/antd.css'; // 手动引入，并覆盖全局样式。 // 报错的！
// 可以，用到那个组件，就引入那个组件的样式
import 'antd4/es/form/style/css'; // 或者 antd/es/button/style/css 加载 css 文件
import 'antd4/es/button/style/css';
import 'antd4/es/input/style/css';
import 'antd4/es/checkbox/style/css';

const Form4Besic = () => {
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (

        <div>
            <p>我是antd4的表单组件：Form4Besic</p>
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="remember"
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};
export default Form4Besic;

// 只需要在包内部进行 render 就可以了。因此在编辑器暴露给外部的应该是一个进行 render 的方法。
// export default ReactDOM.render(<Form4Besic />);